import { nextTick } from "vue";
import type { Directive } from "vue";

export const tabsAnimated: Directive = {
  beforeMount(el) {
    el.style.transition = "opacity 1s ease";
  },
  mounted(el) {
    el.style.opacity = 1;
  },
  updated(el) {
    // 当 tabs 的 activeName 改变时，触发更新
    el.style.opacity = 0;
    // 使用 Vue.nextTick 确保 DOM 更新完成后执行
    nextTick(() => {
      el.style.opacity = 1;
    });
  }
};
